<template>
  <div class="details-title">
    <el-breadcrumb separator-class="el-icon-arrow-right detail-top">
      <el-breadcrumb-item :to="{ path: '/' }" class="title">首页</el-breadcrumb-item>
      <el-breadcrumb-item>分类区域</el-breadcrumb-item>
      <el-breadcrumb-item>AM 英国 蓝龙虾</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="details-introduce">
      <div class="details-left">
        <!--放大镜-->
        <div id="boxSmall" class="details-left-top" @mouseenter="moser($event)" @mousemove="move($event)" @mouseleave="leave($event)">
          <img class="top-img" src="../../assets/image/detail-xia-bottom1.jpg" alt="">
          <div id="mark"></div>
        </div>
        <!--右侧大图-->
        <div class="details-left-top-big" id="top-images" style="display: none;">
          <img class="top-img" v-bind:src="imgs[0]" alt="">
        </div>

        <div class="details-left-bottom" @mouseover="mouse($event)">
          <ul>
            <li v-for="img in imgs">
              <img class="images" v-bind:src="img" alt="">
            </li>
          </ul>
        </div>
      </div>

      <div class="details-right">
        <ul>
          <li class="details-list">
            <div>
              <h3>
                北极熊 俄罗斯 格陵兰虾 单冻（上海市发货）
              </h3>
            </div>
            <div>
              <p>¥65.00/500克</p>
              <p>¥650/箱</p>
            </div>
          </li>
          <li class="details-place">
            <p class="song color-gray g-product_detail">配送&nbsp;&nbsp;:</p>
            <div>
              <div>
                <template>
                  <el-select v-model="value" placeholder="北京市" style="width: 112px;float: left;">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <el-select v-model="value" placeholder="北京市" style="width: 112px;float: left;">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <el-select v-model="value" placeholder="北京市" style="width: 112px;float: left;">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </div>
              <div>
                <span class="func">运输方式&nbsp;&nbsp;:&nbsp;&nbsp;</span>
                <template>
                  <el-select disabled placeholder="商家派送" style="width: 170px;float: left;">
                    <el-option
                      :value="item.value"
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"></el-option>
                  </el-select>
                </template>
              </div>
            </div>
          </li>
          <li class="details-price">
            <div class="once-price color-gray">
              <p class="g-product_detail">运费单价&nbsp;&nbsp;:</p>
              <p>¥25/箱</p>
              <p>起运费&nbsp;&nbsp;:</p>
              <p>¥50元/件</p>
            </div>
          </li>
          <li class="commonW">
            <div class="details-time commonW">
              <p class="color-gray g-product_detail">发货日期&nbsp;&nbsp;:</p>
              <div class="d-every">
                <span class="choose d-product_bd" @click="fn($event)">08-03</span>
              </div>
            </div>
            <div class="details-time commonW">
              <p class="color-gray g-product_detail">包装规格&nbsp;&nbsp;:</p>
              <div class="d-every">
                <span class="choose d-product_bd" @click="fn($event)">33.0/磅/箱</span>
                <span class="choose d-product_bd" @click="fn($event)">30.0/磅/箱</span>
              </div>
            </div>
            <div class="details-time commonW">
              <p class="color-gray g-product_detail">产品规格&nbsp;&nbsp;:</p>
              <div class="d-every">
                <span class="choose d-product_bd" @click="fn($event)">1.25~1.50磅/只(新壳)</span>
                <span class="choose d-product_bd" @click="fn($event)">1.00~1.25磅/只(新壳)</span>
              </div>
            </div>
          </li>
          <li class="commonW">
            <p class="color-gray details-time">质量标准&nbsp;:</p>
            <div class="d-every dis">
              <p class="anything color-gray">死亡率&nbsp;:</p>
              <p class="anything color-gray">10.0%</p>
              <p class="anything color-gray">失水率&nbsp;:</p>
              <p class="anything color-gray">4.0%</p>
              <p class="anything color-gray">破壳率&nbsp;:</p>
              <p class="anything color-gray">免赔</p>
            </div>
          </li>
          <li class="commonW">
            <p class="color-gray details-time">起发量&nbsp;&nbsp;:</p>
            <div class="d-every dis aslat">
              <p class="anything color-gray">55箱</p>
              <p class="color-gray anything">达成率&nbsp;&nbsp;:</p>
              <p class="color-gray anything">0%</p>
            </div>
          </li>
          <li class="commonW">
            <div class="details-time commonW">
              <template>
                <el-input-number style="float: left;margin-right: 20px;width: 140px" v-model="num1" @change="handleChange(num1)" :min="1" :max="10" label="描述文字"></el-input-number>
              </template>
              <div class="d-every dis float-left">
                <p class="color-gray details-time">已售&nbsp;&nbsp;:</p>
                <p class="color-gray g-product_detail quara">0箱</p>
                <p class="color-gray details-time">库存&nbsp;&nbsp;:</p>
                <p class="color-gray g-product_detail quara">0箱</p>
                <p class="color-gray details-time">成交总量&nbsp;&nbsp;:</p>
                <p class="color-gray g-product_detail quara">25226箱</p>
              </div>
            </div>
          </li>
          <li class="commonW details-price button-s">
            <div class="d-every but-top">
              <button class="but1 butt">加入购物车</button>
              <button class="but2 butt">立即购买</button>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="detail-prop commonW">
      <div class="prop-left">
        <div class="prop-left-left">商品属性</div>
        <div class="prop-left-right color-gray">
          <p class="describe">
            <span>捕捞方式：</span>
            <span>野生</span>
          </p>
          <p class="describe">
            <span class="span-1">原产地：</span>
            <span class="span-2">美国</span></p>
          <p class="describe">
            <span class="span-1">发票设置：</span>
            <span class="span-2">提供增值税发票</span></p>
          <p class="describe">请注意龙虾验货不验软硬壳。
            因舱位紧张导致的拉货,调剂，无赔偿。</p>
          <p class="describe">极鲜网提供验货服务</p>
        </div>
      </div>
    </div>

    <div class="detail-pic commonW">
      <h3 class="miaoshu">
        商品描述
      </h3>
      <div class="detail_img-pic commonW">
        <img src="../../assets/image/details-img.jpg" alt="">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Details",
    data() {
      return {
        imgs:[
          require("../../assets/image/detail-xia-bottom1.jpg"),
          require("../../assets/image/detail-xia-bottom2.jpg"),
          require("../../assets/image/detail-xia-bottom3.jpg"),
          require("../../assets/image/detail-xia-bottom4.jpg"),
        ],
        states: true,
        num1: 1,
        options: [{
          value: '选项1',
          label: '上海市'
        }, {
          value: '选项2',
          label: '北京市'
        }, {
          value: '选项3',
          label: '广东省'
        }, {
          value: '选项4',
          label: '江苏省'
        }, {
          value: '选项5',
          label: '浙江省'
        }],
        value: '',
        $Offset: $("#boxSmall").offset(),
        $l: 0,
        $t: 0,
        $maxL: null,
        $maxT: null,
      }
    },
    methods: {
      handleChange(value){
        console.log(value)
      },
      fn:function (e) {
        $(e.target).toggleClass("d-product_Selected").siblings().removeClass("d-product_Selected");
      },
      mouse(e){
        var e = e || window.event;
        if(e.target.className.toLocaleLowerCase()==="images"){
          $(".top-img").attr('src',e.target.src);
        }
      },
      // 放大镜
      moser(e){
        var e = e || window.event;
        $("#mark").css("display", "block");
        $("#top-images").css("display", "block");
      },
      move(e){
        this.$l = e.clientX - $('#boxSmall').offset().left - $("#mark").outerWidth() / 2;
        this.$t = e.clientY - $('#boxSmall').offset().top - $("#mark").outerHeight() / 2;
        this.$maxL = $('#boxSmall').outerWidth() - $("#mark").outerWidth();
        this.$maxT = $('#boxSmall').outerHeight() - $("#mark").outerHeight();
        this.$l = this.$l < 0 ? 0 : this.$l > this.$maxL ? this.$maxL : this.$l;
        this.$t = this.$t < 0 ? 0 : this.$t > this.$maxT ? this.$maxT : this.$t;
        $("#mark").css({left: this.$l, top: this.$t});
        $("#top-images img").css({marginLeft: -3 * this.$l, marginTop: -3 * this.$t})
      },
      leave(e){
        $("#mark").css("display", "none");
        $("#top-images").css("display", "none");
      }
    }
  }
</script>

<style scoped>
  .details-title {
    margin: 30px auto 0;
    width: 1200px;
    min-height: 800px;
  }

  .details-title .el-breadcrumb {
    font-size: 12px;
    color: #777;
    font-weight: lighter;
    margin-bottom: 30px;
  }

  .details-introduce {
    width: 100%;
    position: relative;
    vertical-align: top;
  }

  .details-introduce .details-left {
    position: relative;
    width: 400px;
    display: inline-block;
  }

  .details-introduce .details-left .details-left-top {
    position: relative;
    width: 398px;
    height: 398px;
    border: 1px solid #dbdbdb;
  }

  .details-introduce .details-left .details-left-top-big {
    display: none;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 410px;
    width: 398px;
    height: 398px;
    border: 1px solid #dbdbdb;
    overflow: hidden;
  }

  #mark {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    opacity: 0.6;
    cursor: move;
    position: absolute;
    display: none;
  }

  .details-introduce .details-left .details-left-top  img{
    display: block;
    width: 100%;
    height: 100%;
  }

  .details-introduce .details-left .details-left-top-big  img {
    display: block;
    width: 250%;
    height: 250%;
  }

  .details-introduce .details-left .details-left-bottom {
    position: relative;
    width: 400px;
    height: 100px;
    overflow: hidden;
    padding-top: 10px;
  }

  .details-introduce .details-left .details-left-bottom > ul {
    position: absolute;
    top: 10px;
    left: 0;
    width: 103%;
  }

  .details-introduce .details-left .details-left-bottom > ul > li {
    width: 90.5px;
    height: 90.5px;
    float: left;
    overflow: hidden;
    margin-right: 10px;
    border: 1px solid #dbdbdb;
    cursor: pointer;
  }

  .details-introduce .details-left .details-left-bottom > ul > li > img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .details-introduce .details-right {
    display: inline-block;
    float: right;
    width: 760px;
    text-align: left;
    overflow: hidden;
    position: relative;
  }

  .details-introduce .details-right .details-list{
    width: 100%;
    position: relative;
  }

  .details-introduce .details-right .details-list > div {
    width: 450px;
    display: inline-block;
  }

  .details-introduce .details-right .details-list > div:nth-of-type(2) {
    width: 760px;
  }

  .details-introduce .details-right .details-list > div > h3 {
    font-size: 24px;
    line-height: 1.2;
    font-weight: lighter;
  }

  .details-introduce .details-right .details-list > div > p {
    display: inline-block;
    font-size: 30px;
    line-height: 1;
    margin: 15px 0 6px;
    color: #0173fe;
  }

  .details-introduce .details-right .details-list > div > p:nth-of-type(2) {
    margin-left: 30px;
    font-size: 20px;
    color: #333;
    vertical-align: middle;
    margin-top: -2px;
  }

  .details-introduce .details-right .details-place {
    position: relative;
    width: 100%;
    min-height: 30px;
    vertical-align: top;
    margin-top: 10px;
    float: left;
  }

  .details-introduce .details-right .details-place > .song {
    width: 85px;
    text-align: left;
    line-height: 40px;
    display: inline-block;
    float: left;
    font-size: 14px;
  }

  .details-introduce .details-right .func {
    float: left;
    line-height: 40px;
    font-size: 14px;
    display: inline-block;
    margin-left: 16px;
  }

  .details-introduce .details-price {
    min-height: 30px;
    vertical-align: top;
    margin-top: 10px;
    float: left;
  }

  .details-introduce .details-price p {
    float: left;
    height: 28px;
    margin-right: 20px;
    line-height: 30px;
  }

  .details-introduce .details-price p:nth-of-type(1) {
    margin-right: 0;
  }

  .details-introduce .commonW{
    position: relative;
    width: 100%;
  }

  .details-introduce .commonW .details-time {
    vertical-align: top;
    margin-top: 10px;
    float: left;
  }

  .details-introduce .commonW .anything {
    height: 28px;
    line-height: 28px;
    margin-right: 10px;
    text-align: left;
    display: inline-block;
    float: left;
  }

  .details-introduce .commonW .dis {
    margin-top: 6px;
  }

  .details-introduce .commonW .dis p:nth-of-type(1) {
    margin-left: 20px;
  }

  .details-introduce .commonW .float-left {
    position: absolute;
    top: -4px;
    left: 146px;
  }

  .butt {
    font-size: 16px;
    padding: 14px 0;
    width: 140px;
    text-align: center;
    border: 1px solid #dbdbdb;
    border-radius: 2px;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
  }

  .but1 {
    border-color: #19a79a;
    color: #19a79a;
    background: none;
  }

  .but1 span {
    font-size: 16px;
    color: #19a79a;
    text-align: center;
  }

  .but2 {
    margin-left: 10px;
    border: none;
    background: linear-gradient(270deg,#0091f3,#4334ab);
    color: #fff;
  }

  .but1 span {
    font-size: 16px;
    color: #fff;
    text-align: center;
  }

  .aslat {
    margin-left: 9px;
  }

  .quara {
    margin-left: 10px;
    width: 48px;
  }

  .but-top {
    margin-top: 15px;
  }

  .d-product_bd {
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 2px;
    color: #777;
    font-size: 14px;
    margin-right: 10px;
    line-height: 40px;
    height: 40px;
    padding: 0 10px;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 10px;
  }

  .d-product_Selected {
    border-color: #254cbd;
    color: #3b5ec4;
  }

  .d-every {
    display: inline-block;
    position: relative;
    width: 661px;
    overflow: hidden;
    float: left;
    text-align: left;
  }

  .g-product_detail {
    width: 85px;
    text-align: left;
    line-height: 40px;
    display: inline-block;
    float: left;
  }

  .color-gray {
    font-size: 14px;
    color: #777;
  }

  .detail-prop {
    padding: 20px 0;
    margin: 80px auto 0;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
  }

  .detail-prop .prop-left {
    display: inline-block;
  }

  .detail-prop .prop-left-left {
    width: 180px;
    display: inline-block;
    float: left;
    font-size: 16px;
    color: #333;
    margin-top: 5px;
    overflow: hidden;
  }

  .detail-prop .prop-left-right {
    width: 400px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 10px;
    display: inline-block;
  }

  .detail-prop .prop-left-right .describe {
    font-size: 12px;
    line-height: 2;
  }

  .detail-prop .prop-left-right .describe .span-1{
    font-size: 12px;
    line-height: 2;
    width: 90px;
  }

  .detail-prop .prop-left-right .describe  .span-2{
    font-size: 12px;
    line-height: 2;
    float: right;
    width: 290px;
    vertical-align: top;
    display: inline-block;
  }

  .detail-pic {
    margin-top: 20px;
  }

  .detail-pic .miaoshu {
    font-size: 16px;
    color: #333;
    font-weight: lighter;
  }

  .detail-pic .detail_img-pic {
    border-top: 1px solid #eaeaea;
    padding: 10px;
    text-align: center;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 20px;
  }

  .detail-pic .detail_img-pic > img {
    display: block;
    width: 100%;
    height: 100%;
  }







</style>
